import { useEffect, useState } from "react"
import { View } from "@tarojs/components"
import { Cell, Popup, Picker } from "@antmjs/vantui"

import "./index.less"

const WowSelect = props => {

  /**
   * cols: [{ name: '显示名', value: 实际值 }...]
   * placeholder: 提示文字
   * valueText: 当前展示文字 
   * current: 当前选中
   * onConfirm: 选中后回调，参数为当前选中的值的索引
   */

  const { cols, placeholder, current, onConfirm } = props

  const [show, setShow] = useState(false)
  const [currentPlaceHolder, setCurrentPlaceHolder] = useState(placeholder)

  const togglePopup = () => {
    setShow(!show)
  }

  const confirmLayer = (e) => {
    onConfirm && onConfirm(e.detail.value)
    setCurrentPlaceHolder(e.detail.value.name)
    togglePopup()
  }


  return (
    <View className="wow-select-layer-wrapper">
      {/* 输入框 */}
      <Cell onClick={togglePopup} title={currentPlaceHolder} isLink />
      {/* 弹出层 */}
      <Popup onClickOverlay={togglePopup} position="bottom" show={show}>
        {/* 选择器 */}
        <Picker
          onConfirm={confirmLayer}
          onCancel={togglePopup}
          title={placeholder}
          valueKey="name"
          defaultIndex={current}
          columns={cols} />
      </Popup>
    </View>
  )
}

WowSelect.defaultValue = {
  placeholder: '',
  current: 0
}

export default WowSelect